<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="130px"
      label-position="left"
    >
      <el-form-item label="模块：" prop="module_id">
        <el-select v-model="form.module_id" placeholder="请选择模块" @change="changeModel" style="width:100%">
          <el-option
            v-for="(item, index) in modelarr"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动ID：" prop="task_id">
        <el-select v-model="form.task_id" filterable placeholder="请选择活动ID" style="width:100%">
          <el-option
            v-for="(item, index) in activeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="活动ID:" prop="id">
        <el-input v-model="form.id" disabled />
      </el-form-item> -->
      <el-form-item label="场次:" v-if="is_round" prop="round_id">
        <el-select
          v-model="form.round_id"
          placeholder="请选择场次"
          style="width: 100%"
        >
          <el-option
            v-for="item in modelList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图片:" prop="photo">
        <el-input
          v-model="form.photo"
          readonly
          placeholder="请上传图片"
          style="width: calc(100% - 70px)"
        />
        <div class="commhover inputbox ml_10">
          上传图片
          <input
            type="file"
            name=""
            class="uploadinput commhover"
            id="uploadimg"
            accept="image/*"
            @change="changeImg"
          />
        </div>
      </el-form-item>
      <el-form-item v-if="imgsrc">
        <img :src="imgsrc" alt="" class="imgurl" />
      </el-form-item>
      <el-form-item label="文字描述:" prop="text">
        <el-input v-model="form.text" type="textarea" placeholder="请输入描述" />
      </el-form-item>
      <el-form-item label="链接:" prop="url">
        <el-input v-model="form.url" placeholder="请输入链接" />
      </el-form-item>
      <el-form-item label="排序:" prop="level">
        <el-input-number
          v-model="form.level"
          :min="0"
          :max="100"
          placeholder="排序"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="展示时间段:" prop="time">
        <el-date-picker
          style="width: 100%"
          v-model="form.time"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注:" prop="msg">
        <el-input v-model="form.msg" type="textarea" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="flexend">
      <el-button type="primary" @click="submitForm" :loading="subloading">确 定</el-button>
      <el-button @click="handleCloseAdd">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { getModuleTaskInfo,moduleRoundList,moduleTaskEdit,getModuleType,getModuleList, taskList, moduleTaskCreate } from "@/api/sethome";
import { uploadPhoto } from "@/api/comm";
import { isOverSize } from "@/utils/validate";
export default {
  data() {
    return {
      modelarr:[],
      modelList: [],
      activeList:[],
      imgsrc: "",
      subloading: false,
      is_round:0,
      form: {
        task_id:'',// 活动id
        module_id:'', //模块id
        id:'', //模块活动id
        round_id:'',
        level: 100,
        time: "",
        status: 1,
        url: "",
        photo: "",
        msg: "",
        text:'',
      },
      // 表单校验
      rules: {
        level: [{ required: true, message: "排序值不能为空", trigger: "blur" }],
        time: [{ required: true, message: "请选择时间", trigger: "change" }],
        status: [{ required: true, message: "状态不能为空", trigger: "change" }],
        url: [{ required: true, message: "链接不能为空", trigger: "blur" }],
        photo: [{ required: true, message: "图片不能为空", trigger: "blur" }]
      },
    };
  },

  props: {
    id: {
      default: "",
    },
    // is_round: {
    //   default: 0
    // }
  },

  async created() {
    await getModuleList().then(res=>{
      this.modelarr = res.data
    })
    // this.getModuleRoundList();
    if (this.id) {
      this.getInfo();
    }
  },
  methods: {

    getModuleType(){
      getModuleList().then(res=>{
        this.modelarr = res.data
      })
    },

    getInfo() {
      getModuleTaskInfo({ id: this.id }).then((res) => {
        this.form = Object.assign({},this.form, res.data)
        this.form.time = [res.data.start_time, res.data.end_time];
        this.form.task_id = res.data.t_id
        this.form.module_id = res.data.module_id
        this.changeModel(this.form.module_id)
        this.imgsrc = this.form.photo
        if(this.is_round){
          // 多场次
          this.getModuleRoundList();
        }
      });
    },

    // 获取场次列表
    getModuleRoundList() {
      moduleRoundList({id:this.form.module_id}).then((res) => {
        this.modelList = res.data;
      });
    },

    changeModel(val){
      console.log('val:', val, this.modelarr)
      if(val){
        this.modelarr.forEach(item=>{
          if(val == item.id ){
            taskList({type:item.type}).then(res=>{
              this.activeList = res.data
            })
            this.is_round = item.is_round
            console.log('this.is_round:', this.is_round)
            if(this.is_round == 1){
              this.getModuleRoundList()
            }
          }
        })
      }else{
        this.activeList = []
      }
      
    },

    // 上传图片
    changeImg(event) {
      var file = event.currentTarget.files[0];
      console.log("file:", file, event);
      if (isOverSize(file.size, 5)) {
        this.$message.warning("图片大小不能超过5MB");
        return;
      }
      var formData = new FormData();
      formData.append("file", file);
      formData.append("type", "bg");
      uploadPhoto(formData).then((res) => {
        if (res.code == 1) {
          this.$message.success("上传成功");
          this.imgsrc = process.env.VUE_APP_BASE_API + "/" + res.data;
          this.form.photo = process.env.VUE_APP_BASE_API + "/" + res.data;
          document.getElementById("uploadimg").value = null;
        }
      });
    },

    paramsTrafer() {
      let params = {
        type: this.form.type,
        is_round: this.form.is_round,
        name: this.form.name,
        level: this.form.level,
        status: this.form.status,
        task_num: this.form.task_num,
        url: this.form.url,
        photo: this.form.photo,
        msg: this.form.msg,
        start: this.form.time[0],
        end: this.form.time[1],
        //   };
      };
      if (this.form.type == 1) {
        params.times = this.form.times;
      }
      if (this.form.type == 2 || this.form.type == 3) {
        params.is_btn = this.form.is_btn;
        params.hours = this.form.hours;
      }
      if (this.form.type == 4 || this.form.type == 6) {
        params.score = this.form.score;
      }
      if (this.form.type == 5) {
        params.is_btn = this.form.is_btn;
      }
      return params;
    },

    submitForm() {
      console.log('rowid:',this.rowid)
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.subloading = true;
        let params = {
          task_id: this.form.task_id,
          module_id: this.form.module_id,
          photo: this.form.photo,
          level: this.form.level,
          status: this.form.status,
          text: this.form.text,
          url: this.form.url,
          text: this.form.text,
          msg: this.form.msg,
          start: this.form.time[0],
          end: this.form.time[1],
        }
        if(this.is_round){
          params.round_id = this.form.round_id
        }
        if(this.id){
          moduleTaskEdit({...params,id: this.form.id,}).then(() => {
            this.$message.success("编辑成功");
            this.$emit("close", 1);
            this.subloading = false;
          }).catch(()=>{
            this.subloading = false;
          });
        }else{
          moduleTaskCreate(params).then(() => {
            this.$message.success("添加成功");
            this.$emit("close", 1);
            this.subloading = false;
          }).catch(()=>{
            this.subloading = false;
          });
        }
        
      });
    },

    handleCloseAdd() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
.inputbox {
  display: inline-block;
  width: 60px;
  background-color: #4a73ff;
  border: 1px solid #4a73ff;
  color: #fff;
  height: 32px;
  border-radius: 4px;
  line-height: 32px;
  font-size: 12px;
  text-align: center;
  position: relative;
}
.uploadinput {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
}

.imgurl {
  width: 120px;
  height: 200px;
}
</style>
